React Portāla notikumu burbuļošanas kontrole: selektīva notikumu izplatīšana

React portāli nodrošina jaudīgu veidu, kā renderēt komponentes ārpus standarta React komponentu hierarhijas. Tas var būt neticami noderīgi tādos scenārijos kā modāļi, padomi un pārklājumi, kur ir jāvizualizē elementi neatkarīgi no to loģiskā vecāka. Tomēr šī atdalīšanās no DOM koka var ieviest sarežģītības ar notikumu burbuļošanu, kas potenciāli var novest pie negaidītas uzvedības, ja tā netiek rūpīgi pārvaldīta. Šis raksts pēta notikumu burbuļošanas sarežģītību ar React portāliem un sniedz stratēģijas selektīvai notikumu izplatīšanai, lai sasniegtu vēlamās komponentu mijiedarbības.

Notikumu burbuļošanas izpratne DOM

Pirms iedziļināties React portālos, ir ļoti svarīgi izprast notikumu burbuļošanas pamatkoncepciju Dokumentu Objektu Modelī (DOM). Kad HTML elementā notiek notikums, tas vispirms aktivizē notikumu apstrādātāju, kas ir pievienots šim elementam (mērķim). Pēc tam notikums "burbuļo" augšup pa DOM koku, aktivizējot to pašu notikumu apstrādātāju katrā no tā vecākelementiem, līdz pat dokumenta saknei (window). Šī darbība nodrošina efektīvāku veidu, kā apstrādāt notikumus, jo varat pievienot vienu notikumu klausītāju vecākelementam, nevis pievienot atsevišķus klausītājus katram no tā bērniem.

Piemēram, apsveriet šādu HTML struktūru:

<div id="parent"> <button id="child">Spiediet mani</button> </div>

Ja pievienosiet click notikumu klausītāju gan #child pogai, gan #parent divam, noklikšķinot uz pogas, vispirms tiks aktivizēts notikumu apstrādātājs uz pogas. Pēc tam notikums burbuļos uz vecāku div, aktivizējot arī tā click notikumu apstrādātāju.

Izaicinājums ar React portāliem un notikumu burbuļošanu

React portāli renderē savus bērnus citā atrašanās vietā DOM, efektīvi pārtraucot standarta React komponentu hierarhijas saikni ar sākotnējo vecāku komponentu kokā. Lai gan React komponentu koks paliek neskarts, DOM struktūra tiek mainīta. Šī izmaiņa var radīt problēmas ar notikumu burbuļošanu. Pēc noklusējuma notikumi, kas radušies portālā, joprojām burbuļos augšup pa DOM koku, potenciāli aktivizējot notikumu klausītājus uz elementiem ārpus React lietojumprogrammas vai uz negaidītiem vecākelementiem lietojumprogrammā, ja šie elementi ir senči *DOM kokā*, kurā tiek renderēts portāla saturs. Šī burbuļošana notiek DOM, *nevis* React komponentu kokā.

Apsveriet scenāriju, kurā jums ir modāļa komponents, kas renderēts, izmantojot React portālu. Modālis satur pogu. Noklikšķinot uz pogas, notikums burbuļos uz elementu body (kur modālis tiek renderēts, izmantojot portālu), un pēc tam potenciāli uz citiem elementiem ārpus modāļa, pamatojoties uz DOM struktūru. Ja kādam no šiem citiem elementiem ir klikšķu apstrādātāji, tie var tikt aktivizēti negaidīti, izraisot nevēlamus blakus efektus.

Notikumu izplatīšanas kontrole ar React portāliem

Lai atrisinātu notikumu burbuļošanas problēmas, ko ievieš React portāli, mums ir selektīvi jākontrolē notikumu izplatīšana. Jūs varat izmantot vairākas pieejas:

1. Izmantojot stopPropagation()

Visvienkāršākā pieeja ir izmantot metodi stopPropagation() notikumu objektā. Šī metode novērš notikuma turpmāku burbuļošanu DOM kokā. Jūs varat izsaukt stopPropagation() notikumu apstrādātājā elementam portāla iekšpusē.

Piemērs:

import React from 'react'; import ReactDOM from 'react-dom'; const modalRoot = document.getElementById('modal-root'); // Pārliecinieties, ka jūsu HTML ir elements modal-root function Modal(props) { return ReactDOM.createPortal( <div className="modal" onClick={(e) => e.stopPropagation()}> <div className="modal-content"> {props.children} </div> </div>, modalRoot ); } function App() { const [showModal, setShowModal] = React.useState(false); return ( <div> <button onClick={() => setShowModal(true)}>Atvērt modāli</button> {showModal && ( <Modal> <button onClick={() => alert('Noklikšķināts uz pogas modāļa iekšpusē!')}>Spiediet mani modāļa iekšpusē</button> </Modal> )} <div onClick={() => alert('Noklikšķināts ārpus modāļa!')}> Noklikšķiniet šeit ārpus modāļa </div> </div> ); } export default App;

Šajā piemērā onClick apstrādātājs, kas pievienots .modal divam, izsauc e.stopPropagation(). Tas novērš klikšķus modāļa iekšpusē, aktivizējot onClick apstrādātāju uz <div> ārpus modāļa.

Apsvērumi:

• stopPropagation() novērš notikumu no aktivizēšanas jebkuriem tālāk notikumu klausītājiem augstāk DOM kokā, neatkarīgi no tā, vai tie ir saistīti ar React lietojumprogrammu vai nē.
• Izmantojiet šo metodi apdomīgi, jo tā var traucēt citiem notikumu klausītājiem, kas var paļauties uz notikumu burbuļošanas uzvedību.

2. Nosacīta notikumu apstrāde, pamatojoties uz mērķi

Vēl viena pieeja ir nosacīti apstrādāt notikumus, pamatojoties uz notikuma mērķi. Pirms notikumu apstrādātāja loģikas izpildes varat pārbaudīt, vai notikuma mērķis ir portāla iekšpusē. Tas ļauj selektīvi ignorēt notikumus, kas radušies ārpus portāla.

Piemērs:

import React from 'react'; import ReactDOM from 'react-dom'; const modalRoot = document.getElementById('modal-root'); function Modal(props) { return ReactDOM.createPortal( <div className="modal"> <div className="modal-content"> {props.children} </div> </div>, modalRoot ); } function App() { const [showModal, setShowModal] = React.useState(false); const handleClickOutsideModal = (event) => { if (showModal && !modalRoot.contains(event.target)) { alert('Noklikšķināts ārpus modāļa!'); setShowModal(false); } }; React.useEffect(() => { document.addEventListener('mousedown', handleClickOutsideModal); return () => { document.removeEventListener('mousedown', handleClickOutsideModal); }; }, [showModal]); return ( <div> <button onClick={() => setShowModal(true)}>Atvērt modāli</button> {showModal && ( <Modal> <button onClick={() => alert('Noklikšķināts uz pogas modāļa iekšpusē!')}>Spiediet mani modāļa iekšpusē</button> </Modal> )} </div> ); } export default App;

Šajā piemērā funkcija handleClickOutsideModal pārbauda, vai notikuma mērķis (event.target) ir ietverts elementā modalRoot. Ja tas tā nav, tas nozīmē, ka klikšķis notika ārpus modāļa, un modālis tiek aizvērts. Šī pieeja novērš nejaušus klikšķus modāļa iekšpusē, aktivizējot loģiku "noklikšķiniet ārpusē".

Apsvērumi:

• Šai pieejai ir nepieciešama atsauce uz saknes elementu, kurā tiek renderēts portāls (piemēram, modalRoot).
• Tā ietver manuālu notikuma mērķa pārbaudi, kas var būt sarežģītāka ligzdotiem elementiem portālā.
• Tas var būt noderīgi scenārijos, kur vēlaties konkrēti aktivizēt darbību, kad lietotājs noklikšķina ārpus modāļa vai līdzīga komponenta.

3. Izmantojot notikumu klausītājus, kas paredzēti fāzes fāzei

Notikumu burbuļošana ir noklusējuma darbība, bet notikumi iet arī cauri "pārķeršanas" fāzei pirms burbuļošanas fāzes. Pārķeršanas fāzē notikums pārvietojas lejup pa DOM koku no loga uz mērķa elementu. Jūs varat pievienot notikumu klausītājus, kas klausās notikumus pārķeršanas fāzē, iestatot opciju useCapture uz true, pievienojot notikumu klausītāju.

Pievienojot pārķeršanas fāzes notikumu klausītāju dokumentam (vai citam atbilstošam priekškam), varat pārtvert notikumus pirms tie sasniedz portālu un potenciāli novērst to burbuļošanu. Tas var būt noderīgi, ja jums ir jāveic kāda darbība, pamatojoties uz notikumu, pirms tas sasniedz citus elementus.

Piemērs:

import React from 'react'; import ReactDOM from 'react-dom'; const modalRoot = document.getElementById('modal-root'); function Modal(props) { return ReactDOM.createPortal( <div className="modal"> <div className="modal-content"> {props.children} </div> </div>, modalRoot ); } function App() { const [showModal, setShowModal] = React.useState(false); const handleCapture = (event) => { // Ja notikums rodas no modal-root iekšpuses, nedarīt neko if (modalRoot.contains(event.target)) { return; } // Novērst notikumu burbuļošanu, ja tas rodas ārpus modāļa console.log('Notikums uztverts ārpus modāļa!', event.target); event.stopPropagation(); setShowModal(false); }; React.useEffect(() => { document.addEventListener('click', handleCapture, true); // Pārķeršanas fāze! return () => { document.removeEventListener('click', handleCapture, true); }; }, [showModal]); return ( <div> <button onClick={() => setShowModal(true)}>Atvērt modāli</button> {showModal && ( <Modal> <button onClick={() => alert('Noklikšķināts uz pogas modāļa iekšpusē!')}>Spiediet mani modāļa iekšpusē</button> </Modal> )} </div> ); } export default App;

Šajā piemērā funkcija handleCapture ir pievienota dokumentam, izmantojot opciju useCapture: true. Tas nozīmē, ka handleCapture tiks izsaukts *pirms* jebkuriem citiem klikšķu apstrādātājiem lapā. Funkcija pārbauda, vai notikuma mērķis ir iekšpusē modalRoot. Ja tas ir, notikumam ir atļauts turpināt burbuļošanu. Ja tas tā nav, notikums tiek apturēts no burbuļošanas, izmantojot event.stopPropagation(), un modālis tiek aizvērts. Tas novērš klikšķus ārpus modāļa no izplatīšanās uz augšu.

Apsvērumi:

• Pārķeršanas fāzes notikumu klausītāji tiek izpildīti *pirms* burbuļošanas fāzes klausītājiem, tāpēc tie var potenciāli traucēt citiem notikumu klausītājiem lapā, ja netiek izmantoti uzmanīgi.
• Šī pieeja var būt sarežģītāka izpratnei un atkļūdošanai nekā stopPropagation() vai nosacītas notikumu apstrādes izmantošana.
• Tas var būt noderīgs konkrētos scenārijos, kur jums ir jāpārtver notikumi agrīnā notikumu plūsmā.

4. React sintētiskie notikumi un portāla DOM pozīcija

Ir svarīgi atcerēties React sintētisko notikumu sistēmu. React ietver vietējos DOM notikumus sintētiskos notikumos, kas ir starp-pārlūkprogrammu ietvari. Šī abstrakcija vienkāršo notikumu apstrādi React, bet nozīmē arī to, ka joprojām notiek pamatā esošais DOM notikums. React notikumu apstrādātāji tiek pievienoti saknes elementam un pēc tam delegēti attiecīgajiem komponentiem. Tomēr portāli maina DOM renderēšanas atrašanās vietu, bet React komponentu struktūra paliek tāda pati.

Tāpēc, kamēr portāla saturs tiek renderēts citā DOM daļā, React notikumu sistēma joprojām darbojas, pamatojoties uz komponentu koku. Tas nozīmē, ka jūs joprojām varat izmantot React notikumu apstrādes mehānismus (piemēram, onClick) portāla iekšpusē, tieši nemanipulējot DOM notikumu plūsmu, ja vien jums nav īpaši jānovērš burbuļošana *ārpus* React pārvaldītās DOM zonas.

Labākā prakse notikumu burbuļošanai ar React portāliem

Šeit ir dažas labākās prakses, kas jāņem vērā, strādājot ar React portāliem un notikumu burbuļošanu:

• Izprotiet DOM struktūru: Rūpīgi analizējiet DOM struktūru, kurā tiek renderēts jūsu portāls, lai saprastu, kā notikumi burbuļos augšup pa koku.
• Izmantojiet stopPropagation() taupīgi: Izmantojiet stopPropagation() tikai tad, ja tas ir absolūti nepieciešams, jo tam var būt nevēlami blakus efekti.
• Apsveriet nosacītu notikumu apstrādi: Izmantojiet nosacītu notikumu apstrādi, pamatojoties uz notikuma mērķi, lai selektīvi apstrādātu notikumus, kas radušies portāla iekšpusē.
• Izmantojiet pārķeršanas fāzes notikumu klausītājus: Konkrētos scenārijos apsveriet pārķeršanas fāzes notikumu klausītāju izmantošanu, lai pārtvertu notikumus agrīnā notikumu plūsmā.
• Pārbaudiet rūpīgi: Rūpīgi pārbaudiet savus komponentus, lai pārliecinātos, ka notikumu burbuļošana darbojas, kā paredzēts, un nav negaidītu blakus efektu.
• Dokumentējiet savu kodu: Skaidri dokumentējiet savu kodu, lai izskaidrotu, kā jūs apstrādājat notikumu burbuļošanu ar React portāliem. Tas atvieglos citiem izstrādātājiem jūsu koda izpratni un uzturēšanu.
• Apsveriet pieejamību: Pārvaldot notikumu izplatīšanu, pārliecinieties, ka jūsu izmaiņas negatīvi neietekmē jūsu lietojumprogrammas pieejamību. Piemēram, novēršiet nejaušu tastatūras notikumu bloķēšanu.
• Veiktspēja: Izvairieties no pārmērīga notikumu klausītāju pievienošanas, īpaši objektiem document vai window, jo tas var ietekmēt veiktspēju. Debounce vai throttle notikumu apstrādātājus, ja nepieciešams.

Reālās pasaules piemēri

Apskatīsim dažus reālās pasaules piemērus, kur notikumu burbuļošanas kontrole ar React portāliem ir būtiska:

• Modāļi: Kā parādīts iepriekšminētajos piemēros, modāļi ir klasisks React portālu izmantošanas gadījums. Klikšķu novēršana modāļa iekšpusē no darbību aktivizēšanas ārpus modāļa ir ļoti svarīga labai lietotāja pieredzei.
• Padomi: Padomi bieži tiek renderēti, izmantojot portālus, lai tos novietotu attiecībā pret mērķa elementu. Jūs varat vēlēties novērst klikšķus uz padoma no vecākelementa aizvēršanas.
• Konteksta izvēlnes: Konteksta izvēlnes parasti tiek renderētas, izmantojot portālus, lai tās novietotu tuvu peles kursoram. Jūs varētu vēlēties novērst klikšķus uz konteksta izvēlnes, aktivizējot darbības pamata lapā.
• Nolaižamās izvēlnes: Līdzīgi kā konteksta izvēlnes, nolaižamās izvēlnes bieži izmanto portālus. Notikumu izplatīšanas kontrole ir nepieciešama, lai novērstu nejaušus klikšķus izvēlnē no tās priekšlaicīgas aizvēršanas.
• Paziņojumi: Paziņojumus var renderēt, izmantojot portālus, lai tos novietotu noteiktā ekrāna laukumā (piemēram, augšējā labajā stūrī). Klikšķu novēršana uz paziņojumu no darbību aktivizēšanas pamata lapā var uzlabot lietojamību.

Secinājums

React portāli nodrošina jaudīgu veidu, kā renderēt komponentes ārpus standarta React komponentu hierarhijas, bet tie ievieš arī sarežģītības ar notikumu burbuļošanu. Izprotot DOM notikumu modeli un izmantojot tādas metodes kā stopPropagation(), nosacīta notikumu apstrāde un pārķeršanas fāzes notikumu klausītāji, jūs varat efektīvi kontrolēt notikumu izplatīšanu un veidot paredzamākus un uzturamākus lietotāja interfeisus. Rūpīga DOM struktūras, pieejamības un veiktspējas apsvēršana ir ļoti svarīga, strādājot ar React portāliem un notikumu burbuļošanu. Atcerieties rūpīgi pārbaudīt savus komponentus un dokumentēt savu kodu, lai pārliecinātos, ka notikumu apstrāde darbojas, kā paredzēts.

Apgūstot notikumu burbuļošanas kontroli ar React portāliem, jūs varat izveidot izsmalcinātus un lietotājam draudzīgus komponentus, kas nevainojami integrējas jūsu lietojumprogrammā, uzlabojot kopējo lietotāja pieredzi un padarot jūsu kodu bāzi spēcīgāku. Tā kā izstrādes prakse attīstās, sekot līdzi notikumu apstrādes niansēm nodrošinās, ka jūsu lietojumprogrammas joprojām būs atsaucīgas, pieejamas un uzturamas globālā mērogā.